import { TabBar } from "antd-mobile";
import "./MyTabbar.css";
import {
  AppOutline,
  MessageOutline,
  MessageFill,
  UnorderedListOutline,
  UserOutline,
} from "antd-mobile-icons";
import { useNavigate } from "react-router-dom";
function MyTabbar() {
  const navigate = useNavigate();
  const tz = (key: string) => {
    navigate(key);
  };
  const tabs = [
    {
      key: "/",
      title: "首页",
      icon: <AppOutline />,
    },
    {
      key: "/login",
      title: "搜索",
      icon: <UnorderedListOutline />,
      badge: "5",
    },
    {
      key: "/zc",
      title: "关注",
      icon: <MessageOutline />,
    },
    {
      key: "/shop",
      title: "服务",
      icon: <UserOutline />,
    },
    {
      key: "/choose",
      title: "我的",
      icon: <MessageFill />,
    },
  ];
  return (
    <div>
      <TabBar className="my-tabbar">
        {tabs.map((item) => (
          <TabBar.Item
            onClick={() => tz(item.key)}
            key={item.key}
            icon={item.icon}
            title={item.title}
          />
        ))}
      </TabBar>
    </div>
  );
}

export default MyTabbar;
